<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont">￥{{price}}</text></view>
				</view>
			</tui-list-cell>
			<radio-group v-model="payKey" @change="onChangeRadioGroup">
				<tui-list-cell unlined :hover="false" v-for="(item, index) in paySite" :key="index">
					<label class="tui-pay-item">
						<image :src="item.icon" class="tui-pay-logo"></image>
						<text>{{item.title}}</text>
						<text class="tui-recharge" v-if="item.info">({{item.info}})</text>
						<view class="tui-radio">
							<radio color="#EB0909" :value="index" :checked="item.status"></radio>
						</view>
					</label>
				</tui-list-cell>
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="danger" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	export default {
		name: 'tPayWay',
		emits: ['close', 'btnPay'],
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			price: {
				type: String,
				default: false
			},
			paySite: {
				type: Object,
				default: {}
			},
		},
		created() {
			let that = this;
		},
		data() {
			return {
				payKey: -1,
			};
		},
		methods: {
			onChangeRadioGroup(e) {
				let that = this;
				that.payKey = e.detail.value;
			},
			close() {
				let that = this;
				that.$emit("close", {})
			},
			btnPay(e) {
				let that = this;
				that.$emit("btnPay", {
					payKey: that.payKey,
				})
			}
		}
	}
</script>

<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-amuont {
		color: #eb0910;
		font-weight: 500;
		font-size: 34rpx;
	}

	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 60rpx 50rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		padding: 12rpx 0;
	}
</style>